Skip to content

DX-1128: localise Code + CodeSnippet (completes the visual lift)#3416

Open
jamiehenson wants to merge 1 commit into
dx-1128/docs-syntax-highlighterfrom
dx-1128/docs-codesnippet
Open

DX-1128: localise Code + CodeSnippet (completes the visual lift)#3416
jamiehenson wants to merge 1 commit into
dx-1128/docs-syntax-highlighterfrom
dx-1128/docs-codesnippet

Conversation

@jamiehenson

@jamiehenson jamiehenson commented Jun 17, 2026

Copy link
Copy Markdown
Member

Part of DX-1128. Final PR — localises Code + CodeSnippet (the last @ably/ui visual surface), then applies the end-state cleanup.

What

  • Vendored Code, CodeSnippet (+ ApiKeySelector, CopyButton, LanguageSelector, PlainCodeView, TooltipButton, languages) and the transitive Tooltip into src/components/ui/. MDXWrapper rewired; the SessionData seam stays (apiKeys passed as a prop). The subcomponents' internal Heroicon usages are imported directly from @heroicons/react (with the right outline/solid/micro variants), and PlainCodeView's icon prop takes a ReactNode.
  • Cleanup now that everything is local: drops the node_modules/@ably/ui Tailwind content glob, deletes the 5 dead vendored CSS files (legacy-buttons, dropdowns, layout, Slider, Flash), prunes shadows → the 2 used tokens and forms → the checkbox block. Compiled global.css 8.4k → 6.7k lines.

After this PR

docs' entire visual surface is local. Remaining @ably/ui imports = insights (×6) + scripts (×2 — the SessionDataProvider/useSessionData context API); the old SessionData Redux store + Flash reducer are gone after rebasing onto the 18.3.1 main (Ken's #3418 migration) — parked infra, not design-system.

Stack (DX-1128)

PR Role
#3409 Design foundation — vendor @ably/ui tokens + reset/core CSS (merged)
#3410 Local cn + heights utils
#3411 Docs-native Icon component (Ably glyphs only; Heroicons imported directly)
#3412 Presentational components (Badge, Button, LinkButton, FeaturedLink, Status)
#3413 Interactive components (SegmentedControl, TabMenu)
#3414 ProductTile + product data (leaf)
#3415 syntax-highlighter util + registry
#3416 Code + CodeSnippet — completes the lift; prunes dead CSS + drops @ably/ui Tailwind scan

#3410#3416 are a linear stack, each building on the previous; #3409 has merged to main. ▶ = this PR.

Testing

  • Load the review app.
  • Check a sufficient sample of pages load with no visual regressions.

🤖 Generated with Claude Code

@coderabbitai

coderabbitai Bot commented Jun 17, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0cd638f3-0aee-4f07-9836-458fa21fcc12

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch dx-1128/docs-codesnippet

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 17, 2026 13:33 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from f0aa029 to 712dec4 Compare June 18, 2026 13:19
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 17d25cb to 2da466a Compare June 18, 2026 13:24
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 18, 2026 13:24 Inactive
@jamiehenson jamiehenson marked this pull request as ready for review June 18, 2026 13:36
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from 712dec4 to 2218333 Compare June 18, 2026 14:34
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 2da466a to 6dff760 Compare June 18, 2026 14:34
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 18, 2026 14:34 Inactive
@jamiehenson jamiehenson added the review-app Create a Heroku review app label Jun 18, 2026
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--twycxw June 18, 2026 14:54 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from 2218333 to 2f0072c Compare June 18, 2026 14:57
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 6dff760 to c1b3585 Compare June 18, 2026 14:57
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--twycxw June 18, 2026 14:57 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 18, 2026 14:57 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from 2f0072c to b67f0f1 Compare June 18, 2026 15:50
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from c1b3585 to 0dd3b59 Compare June 18, 2026 15:50
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--twycxw June 18, 2026 15:50 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 18, 2026 15:50 Inactive
@jamiehenson jamiehenson marked this pull request as draft June 18, 2026 16:25
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from b67f0f1 to f97a86b Compare June 23, 2026 13:26
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 0dd3b59 to edfcd5c Compare June 23, 2026 13:26
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--opzlvw June 23, 2026 13:26 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-dx-1128-docs--twycxw June 23, 2026 13:26 Inactive
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 23, 2026 14:11 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from f97a86b to adf4d03 Compare June 23, 2026 16:51
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from edfcd5c to 2886121 Compare June 23, 2026 16:51
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 23, 2026 16:51 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from adf4d03 to b7e67be Compare June 23, 2026 17:15
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 2886121 to 58cbfa2 Compare June 23, 2026 17:15
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 23, 2026 17:15 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 58cbfa2 to cf1a310 Compare June 24, 2026 08:38
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 24, 2026 08:38 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from 96e2ff3 to a1cbcb6 Compare June 25, 2026 07:33
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from cf1a310 to a89f164 Compare June 25, 2026 07:33
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 25, 2026 07:34 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from a89f164 to 988717a Compare June 25, 2026 13:54
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from a1cbcb6 to f2b8c6b Compare June 25, 2026 13:54
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 25, 2026 13:54 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from f2b8c6b to 040b28a Compare June 25, 2026 14:53
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 988717a to 02983c0 Compare June 25, 2026 14:53
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 25, 2026 14:53 Inactive
@jamiehenson jamiehenson force-pushed the dx-1128/docs-syntax-highlighter branch from 040b28a to 7b0ecb0 Compare June 25, 2026 15:19
@jamiehenson jamiehenson force-pushed the dx-1128/docs-codesnippet branch from 02983c0 to 776d25f Compare June 25, 2026 15:19
@jamiehenson jamiehenson temporarily deployed to ably-docs-dx-1128-docs--twycxw June 25, 2026 15:20 Inactive
@jamiehenson

Copy link
Copy Markdown
Member Author

Where these are used (review aid):

  • CodeSnippetsrc/components/Layout/MDXWrapper.tsx — renders interactive code snippets in MDX docs.
  • Code → internal to CodeSnippet + CodeSnippet/PlainCodeView (low-level highlighted render).
  • Subcomponents (ApiKeySelector, CopyButton, LanguageSelector, PlainCodeView, TooltipButton, Tooltip) → internal to CodeSnippet.
  • SegmentedControl (from DX-1128: localise interactive components (SegmentedControl, TabMenu) #3413) → CodeSnippet SDK-type switch + CodeSnippet/TooltipButton.tsx.

~ 𝒞𝓁𝒶𝓊𝒹𝑒

@jamiehenson jamiehenson marked this pull request as ready for review June 25, 2026 15:21
…+ drop @ably/ui Tailwind scan (DX-1128)

Vendor Code and CodeSnippet (with ApiKeySelector, LanguageSelector, CopyButton,
PlainCodeView, Tooltip) locally, off @ably/ui/core, completing the visual lift.
Their internal Heroicon usages now import the components directly from
@heroicons/react rather than routing names through the glyphs-only local Icon,
and PlainCodeView's icon prop takes a ReactNode. Also prunes dead vendored CSS
and drops the @ably/ui path from the Tailwind content scan.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

review-app Create a Heroku review app

Development

Successfully merging this pull request may close these issues.

2 participants